<!--
 * @Date: 2025-07-03 15:09:03
 * @LastEditTime: 2025-07-07 14:44:28
-->
<template>
  <Drawer
    v-model:open="visible"
    title="对象详细信息"
    width="50%"
    :footer-style="{ textAlign: 'right' }"
    @close="handleClose"
  >

    <!-- 元信息行 -->
    <div class="meta-row">
      <span>Schema</span>
      <span>{{selectObj.owner}}</span>
      <span>对象名称：{{selectObj.objectName}}</span>
      <span>对象类型 {{selectObj.objectType}}</span>
    </div>
    <!-- SQL高亮显示 -->
    <div ref="editorContainer" class="sql-editor"></div>
    <!-- 关闭按钮 -->
    <template #footer>
      <Button type="primary" @click="handleClose">关闭</Button>
    </template>
  </Drawer>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch,defineExpose,nextTick,defineProps,computed } from 'vue';
import { Drawer, Button } from 'ant-design-vue';
import * as monaco from 'monaco-editor';

const visible = ref(false);
const editorContainer = ref(null);
let editorInstance = null;
const props = defineProps({
  selectObj: {
    type: Object,
    default: () => ({})
  }
})
const sql = computed(() => {
  return props.selectObj.ddlSql
})


const handleClose = () => {
  visible.value = false;
};

// 初始化Monaco
onMounted(() => {
 
});
onBeforeUnmount(() => {
  if (editorInstance) editorInstance.dispose();
});

const openDrawer = () => {
  visible.value = true;
  nextTick(() => {
    editorInstance = monaco.editor.create(editorContainer.value, {
      value: props.selectObj.ddlSql,
      language: 'sql',
      readOnly: true,
      theme: 'vs-dark',
      fontSize: 14,
      minimap: { enabled: false },
      automaticLayout: true,
      lineNumbers: 'on',
      scrollBeyondLastLine: false,
    });
  })
}
defineExpose({
  openDrawer
})
</script>

<style scoped>
.meta-row {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
  font-weight: bold;
}
.sql-editor {
  height: 220px;
  border: 1px solid #eee;
  margin-bottom: 16px;
  border-radius: 4px;
  overflow: hidden;
}
</style>